<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->


    <meta charset="UTF-8">
    <title>门诊</title>
</head>
<style>
    body,html{
        margin:0px;
        height: 100%;
        background: #ffac50;
    }
    a:link,a:visited{
        text-decoration: none;
    }
    a:hover,a:active{
        text-decoration: underline;
        color: red;
    }
    #top{
        border: solid red 2px;
        width: 100%;
        height: 100px;
        background-color: aqua;
        line-height: 100px;
        font-size: 70px;
        text-align: center;
    }
    #top2{
        width: 100%;
        height: 30px;
        text-align: right;
        font-size: 30px
        line-height: 30px;
    }


    #center{
        width: 100%;
        height: 70%;
    }
    #center-center{
        margin-left: 20%;
        margin-top: 20px;
        border: solid red 2px;
        width: 60%;
        height: 600px;
    }
    .center-center-name{
        border: solid red 1px;
        margin-top: 10px;
        width: 20%;
        float: left;
        height: 50px;
        font-size: 30px;
        line-height: 50px;
        text-align: right;

    }
    .center-center-context{
        border: solid red 1px;
        margin-top: 10px;
        width: 29%;
        float: left;
        height: 50px;
    }
    #context-name{
        border: solid red 1px;
        margin-top: 10px;
        width: 100%;
        height: 50px;
        float: left;
        font-size: 30px;
        line-height: 50px;
    }
    #context-context{
        border: solid red 1px;
        margin-top: 10px;
        height: 300px;
    }
    #down{
        border: solid red 2px;
        width: 100%;
        height: 40px;
        padding: 4px 33%;
    }
    #down div{
        border: solid red 2px;
        width: 10%;
        height: 100%;
        float: left;
        text-align: center;
        line-height: 40px;
        font-size: 30px;
    }
    #context-context div{
        width: 300px;
        height: 30px;
        border: solid red 2px;
        font-size: 20px;
        float: left;
    }
    select{
        width: 120px;
    }
    #down1{
        float: right;
    }
</style>
<body>
<!--<script type="text/javascript" src="jquery-1.7.2.min.js"></script>-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>

    i =0;
    function method(i){
        var pronvice=document.getElementById("pronvice"+i);
        if(pronvice.value=="B超"){
            var towns=["常规B超","经阴道超声","3D超声"];
        }else if(pronvice.value=="血液"){
            var towns=["海滨","北辰","静海"];
        }else if(pronvice.value=="白带常规"){
            var towns=["清洁度","PH","线索细胞"];
        }else if(pronvice.value=="重庆"){
            var towns=["沙坪坝","人名广场","重庆北站"];
        }

        var town=document.getElementById("town"+i);
        town.options.length=0;
        for(var i=0;i<towns.length;i++){
            town.options[i]=new Option(towns[i],towns[i]);
        }
    }
    var count = 1;
    $(document).ready(function(){
        $("#addTable").click(function(){
            if (count<=8)
                var tr="<tr><td><input type=\"checkbox\" name=\"check\"/></td>" +
                        "<td>药品名称</td>" +
                        "<td><select id='pronvice"+i+"'  onchange='method("+i+")'>" +
                        "<option value=\"选择药品名称\">选择药品名称</option>" +
                        "<option value=\"B超\">B超</option>" +
                        "<option value=\"血液\">血液</option>" +
                        "<option value=\"白带常规\">白带常规</option>" +
                        "</select>"+"<select id='town"+i+"'></select>"+
                        "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+"数量"+"<input  type='text'>";
            $("#table1").append(tr);
            i++;
            count ++;
        });
        $("#deleteTable").click(function(){
            var check = document.getElementsByName("check");
            for(var i=0;i<check.length;i++){
                if(check[i].checked){
                    document.getElementById('table1').deleteRow(i);
                    i--;
                    count = check.length +1;
                }
            }
        })
    })
</script>
    <div id="top">
        门诊系统
    </div>
    <div id="top2">
        <div>XX医生你好！<a href="#">退出登录</a></div>
    </div>
    <div id="center">
        <div id="center-center">
            <div>
                <div class="center-center-name">就诊号：</div>
                <div class="center-center-context"></div>
                <div class="center-center-name">姓名：</div>
                <div class="center-center-context"></div>
            </div>
            <div>
                <div class="center-center-name">科室：</div>
                <div class="center-center-context"></div>
                <div class="center-center-name">身份证号：</div>
                <div class="center-center-context"></div>
            </div>
            <div>
                <div class="center-center-name">社保号：</div>
                <div class="center-center-context"></div>
                <div class="center-center-name">性别：</div>
                <div class="center-center-context"></div>
            </div>
            <div>
                <div class="center-center-name">医生：</div>
                <div class="center-center-context"></div>
                <div class="center-center-name">时间：</div>
                <div class="center-center-context"></div>
            </div>
            <div>
                <div id="context-name">开药：</div>
                <div id="context-context">
                    <input type="button" value="增加" id="addTable"/>
                    <input type="button" value="删除" id="deleteTable"/>
                    <table id="table1"></table>
                </div>
            </div>


        </div>
    </div>
    <div id="down">
        <div><a href="#">转住院</a></div>
        <div><a href="#">申请检查</a></div>
        <div><a href="#">开药</a></div>
    </div>
</body>
</html>